<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>客户服务分析--CRM客户关系管理系统</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="resources/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="resources/css/public.css" media="all"/>
</head>
<body class="childrenBody">
<form class="layui-form">
    <blockquote class="layui-elem-quote quoteBox">
        <form class="layui-form">
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <input type="text" class="layui-input searchVal" placeholder="请输入服务类型"/>
                </div>
                <a class="layui-btn search_btn" data-type="reload">搜索</a>
            </div>
        </form>
    </blockquote>
    <table id="servicAnalyse" lay-filter="servicAnalyse"></table>
    <div id="main" style="width: 600px;height: 400px; margin: 2%"></div>
</form>
<script type="text/javascript" src="resources/layui/layui.js"></script>
<!-- 引入 ECharts 文件 -->
<script src="js/jquery-3.4.1.js" type="text/javascript"></script>
<script src="js/echarts.min.js" type="text/javascript"></script>
<script src="" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" th:inline="none">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    //数据加载完之前先显示一段简单的loading动画
    myChart.showLoading();
    layui.use(['form', 'layer', 'table', 'laytpl'], function () {
        var form = layui.form,
            layer = parent.layer === undefined ? layui.layer : top.layer,
            $ = layui.jquery,
            laytpl = layui.laytpl,
            table = layui.table;
        //用户列表
        var tableIns = table.render({
            elem: '#servicAnalyse',
            url: 'basicTypess.do',
            cellMinWidth: 95,
            page: true,
            height: "full-200",
            limits: [10, 15, 20, 25],
            limit: 30,
            id: "servicAnalyseTable",
            cols: [[
                {field: 'basiType_no', title: '编号', minWidth: 100, align: "center"},
                {field: 'basiType_item', title: '服务类型', align: 'center'},
                {field: 'number',title: '服务数量', minWidth: 175, fixed: "right", align: "center"}
            ]]
        });
        //实现搜索功能
        $(".search_btn").click(function () {
            var name = $(".searchVal").val();
            table.reload('servicAnalyseTable', {url: "basicTypess.do?basiType_item=" + name});
        });

    });

    var basiType_item = [];    //横坐标数组（实际用来盛放X轴坐标值）
    var number = [];    //纵坐标数组（实际用来盛放Y坐标值）
    $.ajax({
        url: "cusomerlist.do",
        type: "GET",
        dataType: "json",
        success: function (data) {
            if(data.data){
                for (var i = 0; i < data.data.length; i++) {
                    basiType_item.push(data.data[i].basiType_item);
                    number.push(data.data[i].number);
                }
                myChart.hideLoading();    //隐藏加载动画
                myChart.setOption({

                    title: {
                        text: "服务数量",
                        textStyle:{
                            color:'#c36ff6',
                            fontSize: 20,
                            fontWeight: 'normal',
                            align: 'left',
                            fontFamily:"微软雅黑"
                        }
                    },
                    tooltip: {},
                    legend: {
                        type:'plain',
                        data: ['数量'],
                        textStyle:{
                            color:'#91fce7',
                            fontSize: 20,
                            fontWeight: 'normal',
                            align: 'left',
                            fontFamily:"微软雅黑"
                        }
                    },
                    xAxis: {
                        type: "category",
                        data: basiType_item

                    },
                    yAxis: {
                        type: 'value',
                        nameTextStyle:{
                            color:'#fff'
                        },
                        axisLabel : {
                            formatter: '{value}',
                            textStyle: {
                                color: '#fff',
//                  fontSize:16
                            }
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color:'#7192ca',
                                width:2
                            }
                        },

                    },
                    series: [{
                        // 根据名字对应到相应的系列
                        name: '数量',//
                        type: 'bar',
                        data: number,
                        itemStyle: {
                            emphasis: {
                                barBorderRadius: [10, 10, 10, 10]
                            },//圆角
                            normal: {
                                color: function (params) {
                                    // build a color map as your need.
                                    var colorList = ['#ec635a', '#ed719e', '#c36ff6', '#736af6', '#7993f7', '#86d4fb', '#91fce7'];
                                    return colorList[params.dataIndex]  //柱状图的颜色
                                }
                            },
                            markPoint: {
                                symbol: 'pin',//标记类型
                                symbolSize: 40,//图形大小
                                itemStyle: {
                                    normal: {
                                        borderColor: '#fff',
                                        borderWidth: 1,            // 标注边线线宽，单位px，默认为1
                                        label: {
                                            show: true
                                        }
                                    }
                                },
                                data: [//配置项
                                    {value: '5', xAxis: 0, yAxis: 5},
                                    {value: '10', xAxis: 1, yAxis: 10},
                                    {value: '15', xAxis: 2, yAxis: 15},
                                    {value: '20', xAxis: 3, yAxis: 20},
                                    {value: '25', xAxis: 4, yAxis: 25},
                                    {value: '30', xAxis: 5, yAxis: 30},
                                    {value: '50', xAxis: 6, yAxis: 50},
                                ]
                            },
                        }
                    }],

                });
            }


        }
    });

</script>

</body>
</html>